<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM外部插入after()与before()</title>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <h2>通过before与after添加元素</h2>
    <button id="bt1">点击通过jQuery的before添加元素</button>
    <button id="bt2">点击通过jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">测试before</p>
    </div>
    <div class="aaron">
        <p class="test2">测试after</p>
    </div>
</body>
<script>
    $("#bt1").on("click",function () {
        $(".test1").before("<p style='color:red'>" +
            "before,在匹配元素之前增加"+ "</p>",
            "<p style='color: red'>多参数</p>")
    });

    $("#bt2").on("click",function () {
        $(".test2").after("<p style='color:yellow'>" +
            "after在匹配元素之后增加"+"</p>","<p style='color:yellow'>多参数</p>")
    })
</script>
</html>